import React,{ useState } from "react";
import styled from "styled-components";
// 样式组件的模板字符串里的代码，都会被转译成css样式
// 样式组件的模板字符串中不仅可以直接写样式代码，作用于渲染出来的dom元素，
// &：
    // 是一个类选择器，
    // 可以选中一个样式组件的所有实例
    // 一个样式组件会给他的所有实例设置一个共同的且与其他样式组件的实例不同的类名，&符号会被转译成这个类名的选择器，以选中样式组件的所有实例
const Thing = styled.div.attrs((props ) => ({ tabIndex: props.index||0 }))`
  color: blue;

  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`
export default Thing